<template>
  <div class="box partner-node-collect">
    <div class="header">
      <div class="title">合作商点位数Top5</div>
      <!-- 添加 iconClass 属性 -->
      <svg-icon name="more" class="more" iconClass="icon-more-class" @click="handleMoreClick" />
    </div>
    <el-row :gutter="20" type="flex" align="middle" class="body">
      <el-col :span="17">
        <partner-node-collect-pie-chart :chart-option="pieChartOption" />
      </el-col>
      <el-col :span="7">
        <div class="collect">
          <div class="count">
            {{ nodeCount }}
          </div>
          <div class="name">点位数</div>
          <div class="count count2">
            {{ partnerCount }}
          </div>
          <div class="name">合作商数</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import PartnerNodeCollectPieChart from './partner-node-collect-pie-chart.vue'
import {  NodeCount, PartnerList } from '@/api/manage/node'
import { PartnerCount } from '@/api/manage/partner'
import { ref, onMounted, nextTick } from 'vue';

// 定义变量
const pieChartOption = ref({
  seriesData: []
});

const nodeCount = ref(0);
const partnerCount = ref(0);

onMounted(async () => {
  try {
    const nodeCountResponse = await NodeCount();
    const partnerCountResponse = await PartnerCount();
    const partnerListResponse = await PartnerList();

    if (nodeCountResponse?.data !== undefined) {
      nodeCount.value = nodeCountResponse.data;
    }
    if (partnerCountResponse?.data !== undefined) {
      partnerCount.value = partnerCountResponse.data;
    }

    if (partnerListResponse?.data?.length) {
      // 预处理数据，累加相同合作商的 vmCount
      const partnerMap = {};
      partnerListResponse.data.forEach(item => {
        const partnerName = item.partner?.partnerName || '未知合作商';
        if (partnerMap[partnerName]) {
          partnerMap[partnerName] += item.vmCount || 0;
        } else {
          partnerMap[partnerName] = item.vmCount || 0;
        }
      });

      const seriesData = Object.keys(partnerMap).map(partnerName => ({
        name: partnerName,
        value: partnerMap[partnerName],
      }));

      pieChartOption.value.seriesData = seriesData.slice(0, 5);

      await nextTick(); // 确保 DOM 更新
    }
  } catch (error) {
    console.error('获取数据失败', error);
  }
});
// 示例：更多点击事件
const handleMoreClick = () => {
  console.log('点击了更多按钮');
};
</script>

<style scoped>
.partner-node-collect {
  display: flex;
  flex-direction: column;
  height: calc(40vh - 48px);
  min-height: 353px;
  background: #fff;
  border-radius: 20px;
}

.partner-node-collect .body {
  flex: 1;
}

.partner-node-collect .body .collect {
  width: 154px;
  height: 230px;
  padding-top: 47px;
  padding-left: 38px;
  background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
    linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
    linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
    linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.partner-node-collect .body .collect .count {
  height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #072074;
  line-height: 33px;
}

.partner-node-collect .body .collect .count2 {
  margin-top: 20px;
}

.partner-node-collect .body .collect .name {
  height: 17px;
  margin-top: 6px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000412;
  line-height: 17px;
}

.partner-node-collect .more {
  color: #5f84ff;
  cursor: pointer;
}
</style>